
<template>
  <div>
    <el-table
        border
        :data="formConfigs"
        tooltip-effect="dark"
        height="290px"
        size="small"
        ref="singleTable"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">

      <el-table-column
          prop="field"
          label="字段名"
          width="150">
        <template slot-scope="scope">{{ scope.row.field }}</template>
      </el-table-column>
      <el-table-column
          prop="desc"
          label="字段描述"
          width="250">
        <template slot-scope="scope">{{ scope.row.desc }}</template>
      </el-table-column>
      <el-table-column
          prop="canEditFlag"
          label="是否可编辑"
          width="120">
        <template slot-scope="scope">{{ scope.row.canEditFlag ? '是' : '否' }}</template>
      </el-table-column>
      <el-table-column
          prop="notNullFlag"
          label="是否必填"
          width="120">
        <template slot-scope="scope">{{ scope.row.notNullFlag ? '是' : '否' }}</template>
      </el-table-column>
      <el-table-column
          prop="hideFlag"
          label="是否隐藏"
          width="120">
        <template slot-scope="scope">{{ scope.row.hideFlag ? '是' : '否' }}</template>
      </el-table-column>
    </el-table>
    <div style="margin-top:10px;">
      <el-button type="primary"  size="small" @click="add">添加</el-button>
      <el-button type="primary"  size="small" @click="update">修改</el-button>
      <el-button type="primary"  size="small" @click="remove">删除</el-button>
    </div>
    <AddForm ref="addForm"  @success="addFormRecord"></AddForm>
    <UpdateForm ref="updateForm"  @success="updateFormRecord"></UpdateForm>
  </div>

</template>
<script>
import AddForm from '../form/AddForm.vue';
import UpdateForm from '../form/UpdateForm.vue';
import { utils } from '../../utils/common.js'
export default {
  props:[
      "parentNode",
      "process"
  ],
  components:{
    AddForm,
    UpdateForm
  },
  data(){
    return {
      node:{},
      labelPosition:'right',
      formConfigs:[
      ],
      nowFormConfig:{},
    }
  },
  created(){
  },
  computed:{
  },
  methods:{
    showPro(node){
      this.node = node;
      let config = node.formConfigs;
      this.formConfigs = config == null ? [] : config;
      this.formConfigs.forEach(config=>{
        config.cid = config.id;
      })
    },
    handleCurrentChange(row){
      this.nowFormConfig = row;
    },
    add(){
      this.$refs["addForm"].showDialog(this.node);
    },
    update(){
      if(this.nowFormConfig == null){
        return;
      }
      let formConfig = this.formConfigs[this.formConfigs.findIndex(config=>config.cid === this.nowFormConfig.cid)]
      this.$refs["updateForm"].showDialog(formConfig,this.node);
    },
    remove(){
      if(this.nowFormConfig == null){
        return;
      }
      let index = this.formConfigs.findIndex(config=>config.cid === this.nowFormConfig.cid);
      this.formConfigs.splice(index,1);
    },
    addFormRecord(row){
      this.formConfigs.push(row);
      this.setFormConfigs();
    },
    updateFormRecord(row){
      let index = this.formConfigs.findIndex(config=>config.cid === row.cid);
      this.formConfigs[index] = row;
      this.formConfigs = utils.getCloneObj(this.formConfigs);
      this.setFormConfigs();
    },
    setFormConfigs() {
      if (this.node.type === 'process') {
        this.process.formConfigs = this.formConfigs;
      } else {
        this.parentNode.formConfigs = this.formConfigs;
      }
    },
  }
}
</script>

<style scoped lang="scss">

</style>